<template>
  <div style="height: 535px">
    <div class="top">
      <el-button type="primary" style="margin: 12px;padding:9px">
        <router-link :to="{path:'/csdemo'}">
          <i class="el-icon-circle-plus">&nbsp;&nbsp;新增订单</i>
        </router-link>
      </el-button>
      <!--          下拉选项-->
      <!--为el-select添加filterable属性即可启用搜索功能。
      默认情况下，Select 会找出所有label属性包含输入值的选项。
      如果希望使用其他的搜索逻辑，可以通过传入一个filter-method来实现。
      filter-method为一个Function，它会在输入值发生变化时调用，参数为当前输入值-->
      <el-select  @change="selectInfo" v-model="typevalue" filterable placeholder="全部订单" class="select">
        <el-option  label="全部阶段" value="0"></el-option>
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      &nbsp;&nbsp;  | &nbsp;&nbsp;
      搜索：<el-input @change="selectInfo" v-model="selectorderName" placeholder="请输入订单编号" suffix-icon="el-icon-search"  clearable style="width: 180px"></el-input>
    </div>
    <div class="tab">
      <el-table
        ref="multipleTable"
        :data="orderList"
        tooltip-effect="dark"
        style="width: 100%"
        height="410px"
        @selection-change="handleSelectionChange">

        <el-table-column
          prop="orderTheme"
          label="主题"
          width="180">
        </el-table-column>
        <el-table-column
          prop="contractName"
          label="对应客户"
          show-overflow-tooltip>
          <template slot-scope="scope" >
            <el-button type="text" size="small" @click="customerinfo(scope.row)" >{{scope.row.customerByCustomId.cusName}}</el-button>
          </template>
        </el-table-column>

        <el-table-column
          prop="orderName"
          label="订单号"
          show-overflow-tooltip>
          <template slot-scope="scope" >
            <el-button type="text" size="small" @click="href2(scope.row.orderId)" >{{scope.row.orderName}}</el-button>
          </template>
        </el-table-column>

        <el-table-column
          prop="orderTotal"
          label="总金额"
          show-overflow-tooltip>
          <template slot-scope="scope">
            {{scope.row.orderTotal | amountEvent}}
          </template>
        </el-table-column>

        <el-table-column
          prop="receivableOrder"
          label="回款金额"
          show-overflow-tooltip>
          <template slot-scope="scope">
            {{scope.row.receivableOrder | amountEvent}}
          </template>
        </el-table-column>

        <el-table-column
          prop="orderState"
          label="状态"
          show-overflow-tooltip>
          <template slot-scope="scope">
          <span v-if="scope.row.orderState ==0">
            <i class="el-icon-star-off"></i>
          </span>
            <span v-else>
             <i  class="el-icon-circle-check"></i>
          </span>
          </template>
        </el-table-column>

        <el-table-column
          prop="empId.empName"
          label="所有者"
          show-overflow-tooltip>
        </el-table-column>

        <el-table-column
          prop="orderTime"
          label="开始时间"
          show-overflow-tooltip>
          <template slot-scope="scope">
            {{scope.row.orderTime | formatDate1}}
          </template>
        </el-table-column>

        <el-table-column
          prop="operation"
          label="操作"
          show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-tickets" @click="href2(scope.row.orderId)">
            </el-button>

          </template>
        </el-table-column>
      </el-table>

      <div class="page">
        <el-pagination  @size-change="handleSizeChange1"  @current-change="changePage1" :current-page.sync="currentPage1"
                        :page-sizes="pageSizes1"  layout="total, sizes, prev, pager, next, jumper"
                        :total="totalSize1" style="float: right;margin-top: 10px;">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import {amountToStr, formatTimeToStr} from '../assets/format'
  import TemplateVue from './homepage/TemplateVue'

  export default {
    name: 'SaContractPage',
    components: {TemplateVue},
    data(){
      return{
        selectorderName:'',
        currentPage1:1,//当前页
        pageSizes1:[10, 20, 25],//可选择的页大小
        totalSize1:0,//总页数
        pageSize:0,
        input:'',
        orderList:[],//订单数据
        //订单类型
        typevalue:'',
        //类型数据
        options:[
        {
            value:'1',
            label:'回款完成'
          },{
            value:'2',
            label:'回款未完成'
          },
        ],
        userInfo:{
          employeesId:0,//员工id
          empName:''//员工名称
        },
      }
    },
    created :function() {
      this.userInfo=JSON.parse(sessionStorage.getItem('user'));
       this.pageSize = this.pageSizes1[0];//初始化页数为sizes中的第一个
      this.initData(this.currentPage1,this.pageSize,this.value,this.contractName,this.userInfo.employeesId);
    },
    methods:{
      //客户跳转
      customerinfo(rowInfo){
        this.$router.push({
          path: '/customerview',
          query: {
            customId:rowInfo.customerByCustomId.customId
          }
        })
      },
      selectInfo(){
        if(this.typevalue==null||this.selectorderName==null){
          this.initData(this.currentPage1,this.pageSize,this.value,this.contractName,this.userInfo.employeesId);
        }else {
          this.initData(this.currentPage1,this.pageSize,this.typevalue,this.selectorderName,this.userInfo.employeesId);
          this.typevalue='';
          this.contractName='';
        }
      },
      initData(currentPage,pageSize,value,contractName,userId){
          this.$axios.get("http://localhost:8088/order_info",
          {params:{page:currentPage,size:pageSize,type:value,name:contractName,userId:userId}}).then(v=>{
    this.orderList=v.data.rows;
          this.totalSize1 =v.data.total;
        }).catch();
      },
      //订单详情跳转
      href(contractid){
        this.$router.push({path:'contrantview', query: {key:contractid}})
      },
      //订单详情跳转
      href2(orderId){
        this.$router.push({path:'demopage', query: {key:orderId}})
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleSizeChange1(val){
        this.initData(1,val,this.value,this.contractName,this.userInfo.employeesId);
      },

      changePage1(val){
        this.initData(val,this.pageSize,this.value,this.contractName,this.userInfo.employeesId);
      },

    },
    filters:{
      amountEvent:function(val){
        return amountToStr(val);
      },
      formatDate1: function (time) {
        if (time != null && time != '') {
          var date = new Date(time)
          return formatTimeToStr(date, 'yyyy-MM-dd')
        } else {
          return ''
        }
      },
    }
  }
</script>

<style scoped>
  .top{
    border: 1px solid #D3DCE6;
    width: 100%;
    height: 57px;
    margin-bottom: 10px;
    background: white
  }
  .select{
    padding:10px;
    width: 150px;
    margin-left: 460px;
  }


  .tab{
    background: white;
  }

  .page{
    float: right;
    padding: 0 0 15px 0;
  }
  a{
    text-decoration: none;
    color:white;
  }
</style>
